<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../style/user.css">
    <link rel="stylesheet" href="../plugin/element-ui/index.css">
    <meta charset="UTF-8">
    <title>用户信息</title>
</head>
<body>
  <div id="user_app">
      <div class="head_title">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item><a href="../page/firstIndex.html">首页</a></el-breadcrumb-item>
              <el-breadcrumb-item>用户管理</el-breadcrumb-item>
              <el-breadcrumb-item>用户信息</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div>
          <el-input
                  style="width: 15%"
                  placeholder="请输入内容"
                  v-model="input"
                  clearable>
          </el-input>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
      </div>
      <div>
          <template>
              <el-table
                      :data="tableData"
                      style="width: 100%"
                      :row-class-name="tableRowClassName"
                      @selection-change="handleSelectionChange">
                  <el-table-column
                          type="selection"
                          align="center"
                          width="80">
                  </el-table-column>
                  <el-table-column
                          type="index"
                          align="center"
                          label="序号"
                          width="80">
                  </el-table-column>
                  <el-table-column
                          prop="name"
                          align="center"
                          label="姓名"
                          width="160">
                  </el-table-column>
                  <el-table-column
                          prop="email"
                          align="center"
                          label="邮箱"
                          width="320">
                  </el-table-column>
                  <el-table-column
                          align="center"
                          width="80"
                          label="性别">
                      <template slot-scope="scope">
                          {{ String(scope.row.sex) === '0' ? '女' : '男' }}
                      </template>
                  </el-table-column>
                  <el-table-column
                          prop="idNumber"
                          align="center"
                          width="280"
                          label="身份证">
                  </el-table-column>
                  <el-table-column
                          width="120"
                          align="center"
                          label="状态">
                      <template slot-scope="scope">
                          {{ String(scope.row.status) === '1' ? '启用' : '禁用' }}
                      </template>
                  </el-table-column>
                  <el-table-column label="操作"  align="center" width="380">
                      <template slot-scope="scope">
                          <el-button
                                  size="mini"
                                  type="warning"
                                  @click="handleEdit(scope.$index, scope.row)">{{ String(scope.row.status) === '0' ? '启用' : '禁用' }}</el-button>
                          <el-button
                                  size="mini"
                                  type="danger"
                                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div class="block">
                  <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="page"
                          :page-sizes="[2, 5, 10, 15]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="totalSize">
                  </el-pagination>
              </div>
          </template>
      </div>


  </div>

<script src="../plugin/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../plugin/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../plugin/axios/axios.min.js"></script>
<script src="../js/user.js"></script>
<script>
  let app = new Vue({
    el:"#user_app",
    data() {
      return {
        tableData: [{
            name:'',
            eMail:'',
            sex:1,
            idNumber:'',
            status:1
        }],
          page:1,
          pageSize:2,
          totalSize:0,
          input:''
      }
    },
    created(){
        this.init()
    },
    methods: {
       async init(){
         let name=this.input?this.input:''
         let res = await getUser(this.page,this.pageSize,name)
         if(res.data.code==1){
             this.tableData=res.data.data.records
             console.log(res.data.data)
             this.totalSize=res.data.data.total
         }
        },
          tableRowClassName({row, rowIndex}) {
              if (rowIndex === 1) {
                  return 'warning-row';
              } else if (rowIndex === 3) {
                  return 'success-row';
              }
              return '';
          },
          handleSelectionChange(val) {
              this.multipleSelection = val;
          },
        async handleEdit(index,row){
            let changeStatus=row.status?0:1
            let id = row.id

            this.$confirm('确定调整该用户状态, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await EditStatus({"id":id,"status":changeStatus})
                if(res.data.code==1){
                    this.$message({
                        type: 'success',
                        message: '更新成功!'
                    });
                    this.init()
                } else{
                    this.$message({
                        type: 'warning',
                        message: '系统错误!'
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消'
                });
            });
        },
        handleDelete(index,row){
           let deleteId = row.id

            this.$confirm('确定删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res =await deleteUser(deleteId);
                if(res.data.code==1){
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.init()
                } else{
                    this.$message({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消'
                });
            });
        },
        handleSizeChange(val) {
            this.pageSize=val
            this.init()
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page=val
            this.init()
            console.log(`当前页: ${val}`);
        },
        searchBtn(){
           this.init()
        }
      }
  })
</script>
</body>
</html>